<template>
	<div>
		<div class="address" @click="toAddress" v-if="firstList.getUser == undefined">
			<div class="head clearfix">
				<p class="address-icon">
					<van-icon name="location-o" size="26px" color="#969C9E" tag="i" /><span>暂无收货地址</span></p>
				<p class="add-text"><span>添加地址</span>
					<van-icon name="arrow" size="15px" color="#CDCDCD" tag="i" />
				</p>
			</div>
		</div>
		<div class="has-address" @click="toAddress" v-else>
			<div class="has-haed">
				<p class="icon"><van-icon name="location-o" size="26px" color="#969C9E" tag="i" /></p>
				<div class="province">
					<p class="name">{{firstList.getUser}}&nbsp;&nbsp;&nbsp;{{firstList.phone}}</p>
					<p class="text">{{firstList.shen}}&nbsp; {{firstList.shi}}&nbsp; {{firstList.qu}} &nbsp;{{firstList.address}}</p>
				</div>
				<p class="has-text"><span>修改地址</span>
					<van-icon name="arrow" size="15px" color="#CDCDCD" tag="i" />
				</p>
			</div>
		</div>
	</div>
</template>

<script>
	import Vue from 'vue';
	import { Icon } from 'vant';
	Vue.use(Icon);

	export default {
		props:{
			firstList: Object
		},
		data() {
			return {
				id: '',
				isHasAddress: true,
			}
		},
		created(){
			console.log(this.firstList)
		},
		created(){
			this.id = this.$route.params.id;
			
		},
		methods: {
			// 渠道新增地址页面
			toAddress() {
				 ///修改 新增
				// this.$router.push({
				// 	path: '/home/address/132'
				// })
				//  列表
				this.$router.push({
					path: '/home/addresslist/' + this.id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.has-address{
	width: 100%;
	height: 64px;
	background-color: #fff;
	position: relative;
	text-align: left;
	.has-haed{
		padding: 0 17px;
		.icon{
			width: 52px;
			text-align: center;
			position: absolute;
			top: 27%;
			left: 0;
			float: left;
		}
		.province{
			float: left;
			position: absolute;
			top: 23%;
			left: 15%;
			color: #5D6164;
			line-height: 20px;
			.text{
				width: 194px;
				overflow: hidden;
				text-overflow:ellipsis;
				white-space: nowrap;
				font-size: 12px;
			}
		}
		.has-text{
			float: right;
			font-size: 12px;
			color: #969C9E;
			margin-top: 25px;
			span {
				margin-right: 7px;
			}
			i {
				vertical-align: middle;
			}
		}
	}
}
	.address:before,.has-address:before {
		position: absolute;
		right: 0;
		bottom: 0;
		left: 0;
		height: 1px;
		background: -webkit-repeating-linear-gradient(135deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
		background: repeating-linear-gradient(-45deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
		background-size: 210px;
		content: '';
	}
	
	.address {
		width: 100%;
		height: 64px;
		position: relative;
		background-color: #fff;
		.head {
			width: 100%;
			height: 100%;
			text-align: left;
			padding: 0 17px;
			position: relative;
			line-height: 64px;
			.address-icon {
				float: left;
				i {
					vertical-align: middle;
				}
				span {
					margin-left: 16px;
					color: #5D6164;
				}
			}
			.add-text {
				float: right;
				font-size: 12px;
				color: #969C9E;
				span {
					margin-right: 7px;
				}
				i {
					vertical-align: middle;
				}
			}
		}
	}
</style>